<template>
	<view class="content">
		<view class="top-box">
			<view class="top-box-l">
				<uv-input placeholderClass="placeholderClass" v-model="iptValue" placeholder="怪物便利店系列"
					prefixIcon="search" suffixIcon="scan" suffixIconStyle="color: #000;fontSize:40rpx;" shape="circle"
					clearable @clear="clearValue">

				</uv-input>
			</view>
			<view class="top-box-r" hover-class="activeM" @click="goQd">
				<image src="/static/images/shequqiandao.png" mode="widthFix"></image>签到
			</view>
		</view>

		<view class="content-box1">
			<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
				v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
				{{item.name}}
				<view class="active-line" v-if="tabCurrent == item.id"></view>
			</view>
		</view>

		<attentionHome v-if="tabCurrent == 1" />
		<recommendHome v-if="tabCurrent == 2" />
		<designHome v-if="tabCurrent == 3" />
		<crowdFundingHome v-if="tabCurrent == 4" />
		<auctionHome v-if="tabCurrent == 5" />
		
		
		<view style="width: 100%;height: 80rpx;"></view>
	</view>
</template>

<script setup>
	import attentionHome from '@/components/attentionHome.vue'
	import auctionHome from '@/components/auctionHome.vue'
	import crowdFundingHome from '@/components/crowdFundingHome.vue'
	import designHome from '@/components/designHome.vue'
	import recommendHome from '@/components/recommendHome.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'
	const tabList = ref([{
		id: 1,
		name: '关注'
	}, {
		id: 2,
		name: '推荐'
	}, {
		id: 3,
		name: '设计'
	}, {
		id: 4,
		name: '众筹'
	}, {
		id: 5,
		name: '拍卖'
	}])

	const tabCurrent = ref(2)
	const clickTab = (id) => {
		tabCurrent.value = id
	}
	
	const goQd = () => {
		uni.navigateTo({
			url:'/subpackages/my/sign'
		})
	}
</script>

<style lang="scss" scoped>
	.top-box {
		width: 100%;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;

		.top-box-l {
			width: calc(100% - 120rpx);
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.u-input--circle.data-v-651602aa) {
				background-color: #f2f3f7;
				border: none;
			}

			::v-deep .placeholderClass {
				color: #828999 !important;
			}

			::v-deep .u-input--radius.data-v-fdbb9fe6,
			.u-input--square.data-v-fdbb9fe6 {
				background-color: #f5f6fa !important;
				border: none !important;
			}
		}

		.top-box-r {
			width: 120rpx;
			height: 60rpx;
			background: #E90D00;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #FFFFFF;

			image {
				width: 26rpx !important;
				height: 28rpx !important;
			}
		}
	}

	.content-box1 {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		display: flex;
		margin-bottom: 30rpx;

		.content-box1-item {
			position: relative;
			width: 25%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #9095A8;
		}

		.activeTab {
			font-weight: 600;
			color: #333;
		}

		.active-line {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70rpx;
			height: 8rpx;
			background-color: #e90d00;
			border-radius: 4rpx;
		}
	}
</style>